<template>
    <div class="attach_line">
      <div class="edit_label">附件</div>
      <div>
        <div class="wrap-load" v-if="editting">
          <div class="upload-part">
            <img src="images/addfils.png">
            <input @change="uploadFile" type="file" name="file" id="file" accept="image/*">
          </div>
        </div>
        <div class="file-list" v-for="item in fileList" v-bind:key="item">
          <div class="filname">
            <span class="iplodimg">
              <a v-if="(item.fileType == 'jpg') || (item.fileType == 'png') || (item.fileType == 'pdf') || (item.fileType=='txt') || (item.fileType=='jpeg') " href="javascript:;" @click="showItemClick(item)">{{item.originalName}}</a>
              <img class="delicon" v-if="editting" @click="delImg(item.seqnbr)" src="images/delfil.png">
            </span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'simple-line',
    props: {
      title: {
        type: String,
        default: ''
      },
      value: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'text'
      },
      placeholder: {
        type: String,
        default: '请在此输入'
      },
      important: {
        type: Boolean,
        default: false
      },
      editting: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
      }
    },
    methods:{
      uploadFile(e) {
        let files = e.target.files || e.dataTransfer.files;
        if (!files.length) return;
        this.picValue = files[0];
        let haveImg = false;
        this.$vux.loading.show({text: "上传中"});
        imgPreview(this.picValue).then(imgRes => {
          postImg(imgRes, this.cTransactionNbr, this.cWfType, this.picValue.name)
            .then(res => {
              this.$vux.loading.hide();
              if (res.retCode === "000000") {
                this.cTransactionNbr = res.retData.cTransactionNbr;
                const obj = {
                  originalName: this.picValue.name,
                  fileUrl: imgRes,
                  seqnbr: res.retData.seqnbr,
                  fileType: this.picValue.name.split(".")[1]
                };
                this.fileList.push(obj);
                const file = document.getElementById("file");
                file.value = "";
                this.$vux.alert.show({
                  title: "提示",
                  content: "上传成功"
                });
              } else {
                this.$vux.alert.show({
                  title: "提示",
                  content: res.retMsg
                });
              }
            })
            .catch(e => {
              this.$vux.loading.hide();
              this.$vux.alert.show({
                title: "提示",
                content: "上传失败"
              });
            });
        });
      },
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  
  .edit_line {
    width: 100%;
    padding: 4px 0;
    line-height: 26px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    position: relative;
    font-size: 14px;
    .edit_label {
      width: 36%;
      text-align: right;
      float: left;
      padding-right: 10px;
      font-weight: 600;
      .edit_important {
        width: 10px;
        color: red;
      }
    }
    .edit_value {
      width: 64%;
      float: left;
      font-size: 14px;
      text-align: right;
      color: #2c3e50;
      input {
        width: 100%;
        font-size: 14px;
        padding-left: 15px;
        color: #2c3e50;
      }
    }
    .show_value {
      width: 64%;
      float: left;
      text-align: left;
    }
    .edit_select-control {
      flex: 3;
      text-align: left;
    }
    .edit_date-control {
      flex: 3;
      text-align: left;
    }
  }
</style>
